<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      title="原料分类(单选)"
      :data="treeFilterData"
      :default-value="initParam.goodsCategoryId"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="原料列表"
        row-key="id"
        border
        :indent="20"
        :columns="columns"
        :request-api="getWaresList"
        :request-auto="false"
        :init-param="initParam"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增原料 </el-button>
        </template>
        <!-- 表格操作 -->
        <!-- <template #name="scope">
          <div class="flx-align-center">
            <el-image class="flx-shink0 width60 height60" :src="scope.row!.image">
              <template #error>
                <el-icon size="60"><icon-picture /></el-icon>
              </template>
            </el-image>
            <div class="ml10 flx-column-between">
              <el-text>{{ scope.row!.name }}</el-text>
              <el-text type="info">{{ scope.row!.number }}</el-text>
            </div>
          </div>
        </template> -->
        <template #operation="scope">
          <el-button
            v-if="scope.row.isGoods !== 2"
            v-auth="'edit'"
            type="primary"
            link
            :icon="EditPen"
            @click="toCreate(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.isGoods !== 2"
            v-auth="'delete'"
            type="primary"
            link
            :icon="Delete"
            @click="deleteAccount(scope.row)"
          >
            删除
          </el-button>
          <div v-if="scope.row.isGoods === 2">--</div>
        </template>
      </ProTable>
    </div>
  </div>
</template>

<script setup lang="tsx" name="waresList">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Inventory } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getWaresList, deleteWares } from "@/api/modules/inventory";
import { getWaresCategoryList } from "@/api/modules/inventory";
import { Picture as IconPicture } from "@element-plus/icons-vue";

const proTable = ref<ProTableInstance>();

const initParam = reactive({ goodsCategoryId: 0 });

const treeFilterData = ref<any>([]);
const getTreeFilter = async () => {
  const { data } = await getWaresCategoryList();
  treeFilterData.value = data;
  initParam.goodsCategoryId = treeFilterData.value[0].id;
};

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  proTable.value!.pageable.pageNum = 1;
  initParam.goodsCategoryId = val;
};
const router = useRouter();
// 跳转详情页面
const toCreate = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/inventory/waresEdit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/inventory/waresEdit`);
  }
};

// 表格配置项
const columns: ColumnProps<Inventory.ResWaresList>[] = [
  { type: "index", label: "序号", width: 60 },
  { sortable: true, prop: "barcode", label: "原料条码", align: "left", minWidth: 140 },
  { sortable: true, prop: "name", label: "原料名称", align: "left", minWidth: 230, search: { el: "input" } },
  { sortable: true, prop: "productName", label: "规格", minWidth: 120, align: "left" },
  { sortable: true, prop: "unitName", label: "单位", minWidth: 120, align: "left" },
  { sortable: true, prop: "purPrice", label: "采购价", minWidth: 100, align: "left" },
  // { sortable: true,prop: "posPrice", label: "零售价", minWidth: 100, align: "left" },
  // { sortable: true,prop: "vipPrice", label: "会员价", minWidth: 100, align: "left" },
  // { sortable: true,prop: "rmoPrice", label: "配送价", minWidth: 100, align: "left" },
  { sortable: true, prop: "categoryName", label: "原料分类", minWidth: 120, align: "left" },
  // { sortable: true,prop: "plu", label: "原料PLU", minWidth: 100, align: "left" },
  // {
  //   sortable: true,prop: "isMarketable",
  //   label: "上下架状态",
  //   enum: [
  //     { label: "在售", value: true },
  //     { label: "停售", value: false }
  //   ],
  //   minWidth: 100,
  //   search: { el: "tree-select" },
  //   fieldNames: { label: "label", value: "value" }
  // },
  { prop: "operation", label: "操作", width: 145, fixed: "right" }
];

// 删除
const deleteAccount = async (params: Inventory.ResWaresList) => {
  await useHandleData(deleteWares, { id: params.id }, `删除【${params.name}】原料`);
  proTable.value?.getTableList();
};

onMounted(() => {
  getTreeFilter();
});
</script>
